<template>
    <div class="FatdetailsLive">
        <div ref="chart" class="chart" @click="chartsRank"></div>
        <div class="t_right">
            <ul class="t_ul">
                <h2 class="t_h2">脂肪排名</h2>
                <li class="t_li" v-for="(v, i) in farData[0]" :key="i">
                    {{ v.name }}
                    <span class="t_span1">:{{ v.val }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            farData: [],
        }
    },
    methods: {
        initECharts() {
            let chart1 = this.$refs.chart;
            let myChart = echarts.init(chart1);

            let option = {

                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {

                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: []
                    }
                ]
            }
            for (let i = 0; i < this.farData[0].length; i++) {
                option.series[0].data.push({ value: this.farData[0][i].val, name: this.farData[0][i].name })
            }
            myChart.setOption(option)

        },
        chartsRank() {
            console.log(this.farData[0][0].val);
            for (let i = 0; i < this.farData.length; i++) {
                this.farData[i].sort((a, b) =>
                     a.val-b.val 
                )
            }

        }
    },
    mounted() {
        this.farData.push(this.$route.query.data)

        this.initECharts();
        this.chartsRank()

    }
}


</script>
<style>
.FatdetailsLive{
    width: 1080px;
    margin: auto;
}
.chart {
    width: 540px;
    height: 400px;
    float: left;
    margin-top: 30px;
    margin-left: 80px;
}

.t_h2 {
    text-align: center;
    line-height: 70px;
    font-family: "楷体";
    margin-right: 25px;
    color: rgb(84, 112, 184)
}
.t_right{
    margin-top: 50px;
}
.t_ul {
    overflow-y: auto;
    width: 250px;
    background-color: rgb(250, 248, 248);
    border-radius: 10px;
    margin-left: 700px;
    list-style: none;
}

.t_span1 {
    color: rgb(107, 107, 107);
}

.t_li {
    text-align: center;
    font-family: "楷体";
    margin-left: 35px;
    text-align: left;
    font-size: 18px;
    margin-bottom: 22px;
}
</style>